<script setup>
import {ref} from "vue";
import {http} from "@/api";
import useTable from "@/utils/useTable";
import { useRouter } from "vue-router";
const router = useRouter()
import {dayjs} from "element-plus";


const bannerList = ref([])
http.banner.list().then(res => {
  bannerList.value = res.data
})

/**
 * 表格
 * @type {Ref<UnwrapRef<*[]>>}
 */
const {
  pageNo,
  pageSize,
  total,
  changePage,
  changeSize,
  dataSource,
} = useTable({
  requestFn: http.notice,
  routerPre: 'notice',
})

const recommendList = ref([])
const openView1 = (item) => {
  router.push({name: 'noticeDetail', params: {id: item.id}})
}
const openView2 = (item) => {
  router.push({name: 'newsDetail', params: {id: item.id}})
}
http.news.list().then(res => {
  recommendList.value = res.data.map(el => {
    return {
      ...el,
      create_time: dayjs(el.create_time).format('YYYY-MM-DD HH:mm:ss')
    }
  })
})
</script>

<template>
  <el-main>
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>轮播展示</span>
        </div>
      </template>
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in bannerList" :key="item">
          <el-image :src="item.image"></el-image>
        </el-carousel-item>
      </el-carousel>
    </el-card>
    <div class="list-content f-r j-b">
      <div class="list-right f-c" style="flex-grow: 1">
        <div class="list-table-wrapper2">
          <div class="list-header2 f-r a-c">
            <img src="@/assets/recommend.png" style="width: 20px;height: 18px">
            <span class="list-title">公告列表</span>
          </div>

          <div class="list-table">
            <div class="list-item f-r a-c" v-for="item in dataSource" :key="item.id" @click="openView1(item)">
              <img class="item-img" :src="item.image"/>
              <div class="item-right">
                <div class="item-name">{{ item.name }}</div>
                <div class="f-r a-c item-date">
                  <img class="f-s item-lock" src="@/assets/locke.png" alt="">
                  <span class="item-date-value">{{ item.create_time }}</span>
                  <img class="f-s item-lock" src="../../assets/zan_black.png" alt="">
                  <span  class="item-date-value">{{ item.like_num }}</span>
                </div>
                <div class="item-desc">{{ item.content }}</div>
              </div>
            </div>
          </div>
          <div class="list-page f-r a-c j-c">
            <el-pagination
                v-model:current-page="pageNo"
                v-model:page-size="pageSize"
                :page-sizes="[10, 50, 100, 200]"
                background
                size="small"
                layout="total, prev, pager, next, jumper"
                :total="total"
                @size-change="changeSize"
                @current-change="changePage"
            />
          </div>
        </div>
      </div>
      <div style="width: 20px"></div>
      <div class="list-right f-c">
        <div class="list-table-wrapper2">
          <div class="list-header2 f-r a-c">
            <img src="@/assets/recommend.png" style="width: 20px;height: 18px">
            <span class="list-title">新闻列表</span>
          </div>
          <div class="list">
            <div class="item" v-for="item in recommendList" :key="item.id" @click="openView2(item)">
              <div class="desc">{{ item.name }}</div>
              <div class="item-time">{{ item.create_time }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-main>
</template>

<style lang="scss">
.list-content {
  width: 100%;
  margin: 20px auto;
  .list-left {
    flex-grow: 1;
    height: 100%;
  }
  .list-header {
    .list-title {
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: normal;
      line-height: 38.15px;
      letter-spacing: 0px;
      color: #0067FF;
      margin: 0 10px;
    }
    .list-line {
      flex-grow: 1;
      height: 1px;
      background: #D8D8D8;
    }
    margin-bottom: 31px;
  }
  .list-table {
    flex-grow: 1;
    padding: 0 40px;
    .list-item {
      padding: 10px 0;
      border-bottom: 1px solid  #D8D8D8;
    }
    .item-img {
      flex-shrink: 0;
      height: 120px;
      margin-right: 16px;
    }
    .item-right {
      height: 165px;
      padding: 5px 0;
      overflow: hidden;
    }
    .item-desc {
      text-align: left;
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: normal;
      line-height: 15.6px;
      text-align: center;
      color: #999999;
    }
    .item-name {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: normal;
      line-height: 20px;
      /* 外部/Gray/800 */
      color: #1D2939;overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .item-lock {
      width: 10px;
      height: 10px;
      flex-shrink: 0;
      margin-right: 10px;
    }
    .item-date {
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: normal;
      line-height: 15.6px;
      text-align: center;
      color: #999999;
      margin-left: 10px;
      margin: 5px 0;
    }
    .item-date-value {
      margin-right: 16px;
    }
    .item-desc {
      text-align: left;
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: normal;
      line-height: 16px;
      color: #666666;
      // 三行隐藏省略号
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }

  .list-right {
    flex-shrink: 0;
    width: 30%;
    .list-table-wrapper2 {
      padding: 22px 32px;
      border-radius: 20px;
      background-color: #FFFFFF;
      overflow: auto;
      .list-header2 {
        margin-bottom: 6px;
        .list-title {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: normal;
          line-height: 14px;
          letter-spacing: 0px;
          color: #0A6EFF;
          margin-left: 8px;
        }
      }
      .list {
      }
      .item {
        padding: 12px 0 6px 0;
        border-bottom: 1px solid  #D8D8D8;
        .desc {
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: normal;
          line-height: 14px;
          /* 外部/Gray/800 */
          color: #1D2939;
        }
        .item-time {
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: normal;
          line-height: 16px;
          color: #666666;
        }
      }
    }
  }
}
</style>